import CartList from './components/CartList';
import CartFooter from './components/CartFooter';

/*构建一个仓库，然后进行集中化的数据管理*/

/*
* 1. > yarn add redux
* 2. 使用相关 api 创建仓库
* */
import {createStore} from 'redux';

const initState = [
    {
        id: 1,
        goodsName: '百年孤独1000万册纪念套装（精美套盒典藏版，赠送3款马尔克斯金句胶带）',
        goodsPrice: 120,
        number: 10,
    },
    {
        id: 2,
        goodsName: '（精美套盒典藏版，赠送3款马尔克斯金句胶带）',
        goodsPrice: 89,
        number: 3,
    },
    {
        id: 3,
        goodsName: '百年孤独1000万册纪念套装',
        goodsPrice: 100,
        number: 8,
    }
];

const store = createStore(function (state = initState, action) {
    console.log(action);

    switch (action.type) {
        case 'sub':
            return state.map(item => {
                /*把满足条件的购物车商品数量-1*/
                if (item.id === action.goodsId) {
                    item.number -= 1;
                }
                return item;
            })
        case 'add':
            return state.map(item => {
                /*把满足条件的购物车商品数量-1*/
                if (item.id === action.goodsId) {
                    item.number += 1;
                }
                return item;
            })
        default:
            return state;
    }
});


function App() {
    return (
        <div className="App">
            <h1>redux在react中的使用</h1>
            <p>使用redux完成一个购物车案例</p>
            <p>参照 当当购物车实现</p>
            {/*组件一 列表组件*/}
            <CartList store={store}></CartList>

            {/*组件二 底部结算组件*/}
            <CartFooter store={store}></CartFooter>
        </div>
    );
}

export default App;
